<template>
  <div class="profile">
    <!-- 用户基本信息 -->
    <el-image :src="imagesrc" style="width: 420px; height: 300px; margin-top: -55px; margin-left: 0;"></el-image>

    <div class="user-info" v-for="u in user" :key="u.id">
      <el-image class="user-photo" :src="u.photo" style="border-radius: 50%;"></el-image>
      <p class="user-name">{{ u.name }} 评分: {{ u.score }}</p>
      <p class="user-name1">ID: {{ u.id }} 家乡: {{ u.hometown }}</p>
      <p>个人简介: {{ u.address }}</p>
      <p>游戏名称: {{ u.gamesType }}</p>
      <p>擅长的位置: {{ u.good }}</p>
      <p>游戏大区: {{ u.region }}</p>
      <p>价格: {{ u.price }}元/小时</p>
      <el-image :src="u.url" style="margin-top: 10px;"></el-image>
    </div>

    <el-button type="primary" @click="findPlayer">找ta陪玩</el-button>

    <el-dialog title="陪玩" :visible.sync="dialogVisibleList" width="100%">
      <div class="dialog-content">
        <el-image :src="selectedUser.photo" style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 15px;"></el-image>
        <p class="dialog-username">{{ selectedUser.name }}</p>
        <p><strong>游戏名称：</strong>{{ selectedUser.gamesType }}</p>
        <p><strong>用户ID：</strong>{{ selectedUser.id }}</p>
        <p><strong>游戏大区：</strong>{{ selectedUser.region }}</p>
        <p><strong>价格：</strong>{{ selectedUser.price }}元/小时</p>
        <p @click="showTimeDialog" class="select-time">预约时间：请选择</p>

        <div class="dialog-actions">
          <el-button @click="dialogVisibleList = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="预约时间" :visible.sync="timeDialogVisible" width="60%">
     <div>
       <el-time-picker type="date" placeholder="开始时间" v-model="from.startTime" value-format="yyyy-MM-dd HH:mm:ss"></el-time-picker>
       <el-time-picker type="date" placeholder="结束时间" v-model="from.endTime" value-format="yyyy-MM-dd HH:mm:ss"></el-time-picker>
       <p v-if="isTimeInvalid" style="color: red;">开始时间不能大于结束时间</p>
   </div>
      <div class="dialog-actions">
        <el-button type="primary" @click="confirmBooking()">确认下单</el-button>
        <el-button @click="timeDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'UserProfile',
  data() {
    return {
      user: [],
      imagesrc: "https://clubimg.club.vmall.com/data/attachment/forum/202012/29/185053eawmecvrwrwp1urk.jpg",
      gid: null,
      dialogVisibleList: false,
      selectedUser: {},
      timeDialogVisible: false, // 新增用于控制时间选择弹窗的变量
      from: {
        pid: null,

      },
    };
  },
  mounted() {
    const gid = this.$route.query.gid;
    if (gid) {
      this.gid = JSON.parse(gid);
      this.findAPLay();
    }
  },
  computed: {
    isTimeInvalid() {
      return this.from.startTime && this.from.endTime && new Date(this.from.startTime) > new Date(this.from.endTime);
    }
  },
  methods: {
    findPlayer() {
      this.selectedUser = this.user[0];
      this.dialogVisibleList = true;
    },
    confirmBooking() {
      this.from.pid=this.gid
      this.from.cost=this.selectedUser.price
      alert(this.from.pid)
      this.dialogVisibleList = false;
      this.timeDialogVisible = false; // 确认下单时关闭时间选择弹窗
      alert(this.from.startTime)
      this.from.userId = sessionStorage.getItem("id");
      axios.post(`http://localhost:8083/orders/add`, this.from).then(res=> {
        if (res.data.code === 200) {
          alert('预约成功！');
        } else {
          alert('预约失败！');
        }
      })
    },
    showTimeDialog() {
      this.timeDialogVisible = true; // 显示时间选择弹窗
    },
    findAPLay() {
      axios.get(`http://localhost:8083/play/Tab?id=${this.gid}`).then(res => {
        this.user = res.data.data;
      });
    }
  },
};
</script>

<style scoped>
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info {
  background-color: #ffffff;
  border-radius: 10px;
  width: 430px;
  padding: 20px;
  margin-top: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-name, .user-name1 {
  margin: 0;
}

.user-photo {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 50%;
}

.dialog-content {
  text-align: center;
  padding: 20px;
}

.dialog-username {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.dialog-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.select-time {
  color: #409EFF; /* 使用蓝色来表示可点击的文本 */
  cursor: pointer;
  text-decoration: underline; /* 添加下划线效果 */
}

.time-selection table {
  width: 100%;
  border-collapse: collapse;
}

.time-selection th, .time-selection td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.highlight {
  background-color: #f0f9eb; /* 高亮显示的背景色 */
}
</style>
